<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - 智能学习平台</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <style>
        .login-container {
            max-width: 450px;
            margin: 6rem auto;
            padding: 2.5rem;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            border-radius: 12px;
            background-color: #fff;
        }
        .role-selector {
            display: flex;
            gap: 1rem;
            margin-bottom: 2rem;
        }
        .role-card {
            flex: 1;
            padding: 1.5rem;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
            text-align: center;
        }
        .role-card.active {
            border: 2px solid #007bff;
            box-shadow: 0 0 10px rgba(0, 123, 255, 0.2);
        }
        .role-card:hover {
            transform: translateY(-5px);
        }
        .teacher-card {
            background-color: #e9f2ff;
            border: 1px solid #cce5ff;
        }
        .student-card {
            background-color: #f0fdf4;
            border: 1px solid #d1fae5;
        }
        .form-label {
            font-weight: 500;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="login-container">
            <h2 class="text-center mb-4">智能学习平台 - 登录</h2>

            {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                    {% for category, message in messages %}
                        <div class="alert alert-{{ category }}">{{ message }}</div>
                    {% endfor %}
                {% endif %}
            {% endwith %}

            <div class="role-selector">
                <div class="role-card teacher-card" data-role="teacher">
                    <i class="fa fa-graduation-cap fa-3x mb-2 text-primary"></i>
                    <h5>教师登录</h5>
                    <p>管理课程与学生数据</p>
                </div>
                <div class="role-card student-card" data-role="student">
                    <i class="fa fa-user fa-3x mb-2 text-success"></i>
                    <h5>学生登录</h5>
                    <p>学习课程与查看进度</p>
                </div>
            </div>

            <form method="POST" action="/login">
                <input type="hidden" id="role" name="role" value="teacher">
                <div class="mb-3">
                    <label for="email" class="form-label">邮箱</label>
                    <input type="email" class="form-control" id="email" name="email" required>
                </div>
                <div class="mb-3">
                    <label for="password" class="form-label">密码</label>
                    <input type="password" class="form-control" id="password" name="password" required>
                </div>
                <button type="submit" class="btn btn-primary w-100">登录</button>
            </form>
            <div class="text-center mt-3">
                <a href="/" class="text-decoration-none text-muted">返回首页</a>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 角色选择逻辑
        document.querySelectorAll('.role-card').forEach(card => {
            card.addEventListener('click', function() {
                document.querySelectorAll('.role-card').forEach(c => c.classList.remove('active'));
                this.classList.add('active');
                document.getElementById('role').value = this.dataset.role;
            });
        });

        // 默认选中教师角色
        document.querySelector('.teacher-card').classList.add('active');
    </script>
</body>
</html>